<template>
	<view class="curr_content">
		<view class="top_nav">
		   <view class="left" @click="back()">
		    <image src="../../static/img/arrow-left.png" mode=""></image>
		    <p>我的简历</p >
		   </view>
		   <button class="right" type="default" @click="toEdit()">
		    编辑模式
		   </button>
		   </view>
		   <view class="box">
		<view class="left">
			<image src="../../static/img/pic.jpg" mode=""></image>
		</view>
		<view class="right">
			<view class="name">
				赵凯
			</view>
			<view class="phone">
				13565999999
			</view>
			<view class="type">
				中国 ·  汉族  ·  群众  
			</view>
			<view class="age">
				1987-07-19  ·  33岁  ·  未婚
			</view>
		</view>
		</view>
		<view class="basic">
			<view class="b-t">基本信息</view>
			<view style="width: 100%;" v-for="(item,index) in infoList" :key='index'>
			<view class="b-c" >
				<view  class="b-name">员工工号</view>
				<view class="b-m">{{item.num}}</view>
			</view>
			<view class="b-c" >
				<view  class="b-name">员工类型</view>
				<view class="b-m">{{item.type}}</view>
			</view>
			<view class="b-c" >
				<view  class="b-name">工作单位</view>
				<view class="b-m">{{item.unit}}</view>
			</view>
			<view class="b-c" >
				<view  class="b-name">工作部门</view>
				<view class="b-m">{{item.dept}}</view>
			</view><view class="b-c" >
				<view  class="b-name">岗位</view>
				<view class="b-m">{{item.post}}</view>
			</view>
			<view class="b-c" >
				<view  class="b-name">进入特变日期</view>
				<view class="b-m">{{item.entryDate}}</view>
			</view>
			<view class="b-c" >
				<view  class="b-name">入司日期</view>
				<view class="b-m">{{item.inDtae}}</view>
			</view>
			</view>
			<uni-collapse ref="add" class="warp" @change="change" style="background: #fff;">
				<uni-collapse-item style="background: #fff;">
					<view style="width: 100%;" v-for="(item,index) in infoList" :key='index'>
					<view class="b-c" >
						<view  class="b-name">员工工号</view>
						<view class="b-m">{{item.num}}</view>
					</view>
					<view class="b-c" >
						<view  class="b-name">员工类型</view>
						<view class="b-m">{{item.type}}</view>
					</view>
					<view class="b-c" >
						<view  class="b-name">工作单位</view>
						<view class="b-m">{{item.unit}}</view>
					</view>
					<view class="b-c" >
						<view  class="b-name">工作部门</view>
						<view class="b-m">{{item.dept}}</view>
					</view><view class="b-c" >
						<view  class="b-name">岗位</view>
						<view class="b-m">{{item.post}}</view>
					</view>
					<view class="b-c" >
						<view  class="b-name">进入特变日期</view>
						<view class="b-m">{{item.entryDate}}</view>
					</view>
					<view class="b-c" >
						<view  class="b-name">入司日期</view>
						<view class="b-m">{{item.inDtae}}</view>
					</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>	
		</view>
		<view class="basic" >
			<view class="b-t">教育信息</view>
			<view style="width: 100%;">
			<view class="c-c" >
				<view  class="b-e-name"><image src="../../static/img/school.png" mode=""></image></view>
				<view class="b-e1">华东理工大学</view>
			</view>
			<view class="c-c" >
				<view  class="b-e-name"></view>
				<view class="b-e2">2006-09-01 - 2010-07-17</view>
			</view>
			<view class="c-c" >
				<view  class="b-e-name"></view>
				<view class="b-e1">本科      软件工程</view>
			</view>
			</view>
			<uni-collapse ref="add" class="warp" @change="change" style="background: #fff;">
				<uni-collapse-item style="background: #fff;">
					<view style="width: 100%;">
					<view class="c-c" >
						<view  class="b-e-name"><image src="../../static/img/school.png" mode=""></image></view>
						<view class="b-e1">华东理工大学</view>
					</view>
					<view class="c-c" >
						<view  class="b-e-name"></view>
						<view class="b-e2">2006-09-01 - 2010-07-17</view>
					</view>
					<view class="c-c" >
						<view  class="b-e-name"></view>
						<view class="b-e1">硕士研究生      软件工程</view>
					</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
		<view class="basic" >
			<view class="b-t">语言技能</view>
			<view class="c-c" >
				<view  class="b-e-name"><image src="../../static/img/language.png" mode=""></image></view>
				<view class="b-e1">英语</view>
			</view>
			<view class="c-c" >
				<view  class="b-e-name"></view>
				<view class="b-e2">2019-08-05</view>
			</view>
			<view class="c-c" >
				<view  class="b-e-name"></view>
				<view class="b-e1">CET4      88</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue';
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue';
	export default {
		data(){
			return {
				infoList:[{
					id:1,
					num:'812123',
					type:'正式员工',
					unit:'特变电工股份有限公司',
					dept:'人力资源部',
					post:'软件开发岗',
					entryDate:'2017-01-01',
					inDtae:'2017-01-01',
				}]
			}
		},
		methods: {
		  back() {
		   uni.navigateBack({ delta: 1 });
		  },
		  toEdit(){ 
		   uni.navigateTo({
		       url: 'edit'
		   });
		  }
		 }
	}
</script>

<style  lang="less">
	page{
		// background: #f3f3f3;
	}
	/deep/.uni-icons[data-v-0bf90c00] {
    font-family: uniicons;
    text-decoration: none;
    text-align: center;
    // margin-right: 143px;
	position: absolute;
	left: 48%;
}
	.basic{
		width: 100%;
		display: flex;
		// height: 250upx;
		padding: 25upx 40upx;
		box-sizing: border-box;
		flex-wrap: wrap;
		// border-bottom: 1px solid #eee;
		// background: pink;
		.b-t{
			width: 100%;
			height: 60upx;
			line-height: 60upx;
			font-size: 30upx;
			font-weight: 550;
			}
			.c-c{
				width: 100%;
				height: 50upx;
				display: flex;
				justify-content: space-between;
				flex-wrap: nowrap;
				margin-top: 8upx;
				// background: red;
				.b-e-name{
					width: 15%;
					height: 50upx;
					font-size: 26upx;
					image{
						width: 50upx;
						height: 50upx;
					}
				}
				.b-m{
					width: 65%;
					height: 50upx;
					text-align: right;
					font-size: 26upx;
					color: #999;
				}
				.b-e1{
					width: 85%;
					height: 40upx;
					line-height: 40upx;
					font-size: 26upx;
				}
				.b-e2{
					width: 85%;
					height: 40upx;
					line-height: 40upx;
					font-size: 26upx;
					color: #999;
				}
			}
			.b-c{
				width: 100%;
				height: 50upx;
				display: flex;
				justify-content: space-between;
				flex-wrap: nowrap;
				margin-top: 20upx;
				.b-name{
					width: 35%;
					height: 50upx;
					font-size: 26upx;
				}
				.b-e-name{
					width: 15%;
					height: 50upx;
					font-size: 26upx;
					image{
						width: 50upx;
						height: 50upx;
					}
				}
				.b-m{
					width: 65%;
					height: 50upx;
					text-align: right;
					font-size: 26upx;
					color: #999;
				}
				.b-e{
					width: 85%;
					height: 50upx;
					line-height: 50upx;
					font-size: 26upx;
				}
				.b-e1{
					width: 85%;
					height: 40upx;
					line-height: 40upx;
					font-size: 26upx;
					color: #999;
				}
			}
	}
		
	.box{
		width: 100%;
		display: flex;
		height: 250upx;
		padding: 25upx 0upx;
		box-sizing: border-box;
		background: #fff;
		.left{
			width: 40%;
			height: 250upx;
			/* background: red; */
			image{
				width: 100%;
				height: 200upx;
			}
		}
		.right{
			width: 60%;
			height: 250upx;
			/* background: pink; */
			.name{
				width: 100%;
				height: 60upx;
				line-height: 60upx;
				font-size: 34upx;
			}
			.phone{
				width: 100%;
				height: 40upx;
				line-height: 40upx;
				font-size: 28upx;
				/* background: red; */
				margin-bottom: 15upx;
				color: #757575;
			}
			.type{
				width: 100%;
				height: 45upx;
				line-height: 45upx;
				font-size: 26upx;
				color: #757575;
			}
			.age{
				width: 100%;
				height: 45upx;
				line-height: 45upx;
				font-size: 26upx;
				color: #757575;
			}
		}
		
	}
	.curr_content {
	  width: 100%;
	  height: 100%;
	  .top_nav {
	   width: 100%;
	   height: 100rpx;
	   background-color: #007aff;
	   padding: 20rpx;
	   box-sizing: border-box;
	   display: flex;
	   justify-content: space-between;
	   position: relative;
	   .left {
	    display: flex;
	    image {
	     width: 58rpx;
	     height: 58rpx;
	    }
	    p {
	     color: #fff;
	     font-size: 32rpx;
	     margin: 7rpx 0 0 10rpx;
	    }
	   }
	   .right {
	    width: 160rpx;
	    height: 60rpx;
	    line-height: 60rpx;
	    color: #101010;
	    font-size: 26rpx;
	    position: absolute;
	    top: 20rpx;
	    right: 50rpx;
	   }
	  }
	 }
</style>
